<div class="content-section documentation implementation">
    <h1>Colors</h1>
    <p>Each PrimeNG theme exports its own color palette.</p>

    <h5>Getting Started</h5>
    <p>Colors are exported as CSS variables and used with the standard <i>var</i> syntax such as <i>var(--text-color)</i>.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;span [ngStyle]="&#123;color:'var(--text-color)'&#125;"&gt;&lt;/span&gt;
</app-code>
    <h5>General Colors</h5>
    <p>These are common variables used throughout the theme.</p>

    <div class="doc-tablewrapper">
        <table class="doc-table">
            <thead>
                <tr>
                    <th>Variable</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><i>--text-color</i></td>
                    <td>Font text color.</td>
                </tr>
                <tr>
                    <td><i>--text-secondary-color</i></td>
                    <td>Muted font text color with a secondary level.</td>
                </tr>
                <tr>
                    <td><i>--primary-color</i></td>
                    <td>Primary color of the theme.</td>
                </tr>
                <tr>
                    <td><i>--primary-color-text</i></td>
                    <td>Text color when background is primary color.</td>
                </tr>
                <tr>
                    <td><i>--font-family</i></td>
                    <td>Font family of the theme.</td>
                </tr>
            </tbody>
        </table>
    </div>

    <h5>Color Palette</h5>
    <p>A palette consists of 9 colors where each color provides tints/shades from 50 to 900.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div [ngStyle]="&#123;backgroundColor:'var(--blue-500)'&#125;"&gt;&lt;/div&gt;
</app-code>

    <div class="card">
        <div class="flex flex-wrap">
            <div *ngFor="let color of colors" class="color-stack mr-6 mb-6">
                <div *ngFor="let shade of shades">
                    <div *ngIf="shade !== 0" class="color-box" [ngStyle]="{backgroundColor:'var(--'+color+'-'+shade, color: (shade > 500 ? '#fff': '#000')}">
                        {{color}}-{{shade}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <h5>Surfaces</h5>
    <p>In addition, a theme brings a special palette called surfaces that can be used as the base when designing the surface layers and separators.</p>
    <div class="card">
        <div class="color-stack">
            <div *ngFor="let shade of shades">
                <div class="color-box" [ngStyle]="{backgroundColor:'var(--surface-'+shade, color: (config.dark ? (shade > 400 ? '#000': '#fff') : (shade > 500 ? '#fff' : '#000'))}">
                    surface-{{shade}}
                </div>
            </div>
        </div>
    </div>
    <p>A theme also exports named surfaces for common use cases.</p>

    <div class="doc-tablewrapper">
        <table class="doc-table">
            <thead>
                <tr>
                    <th>Variable</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><i>--surface-ground</i></td>
                    <td>Base ground color.</td>
                </tr>
                <tr>
                    <td><i>--surface-section</i></td>
                    <td>Color of a section on a ground surface.</td>
                </tr>
                <tr>
                    <td><i>--surface-card</i></td>
                    <td>Color of a surface used as a card.</td>
                </tr>
                <tr>
                    <td><i>--surface-overlay</i></td>
                    <td>Color of overlay surfaces.</td>
                </tr>
                <tr>
                    <td><i>--surface-border</i></td>
                    <td>Color of a divider.</td>
                </tr>
                <tr>
                    <td><i>--surface-hover</i></td>
                    <td>Color of an element in hover state.</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
